<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=2.0, user-scalable=yes" />


<link rel="stylesheet" type="text/css" href="css/mapwork.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css" />

<style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
   <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
  
</head>


<body>
 <div style="outline:1px solid #fff; margin: 0px auto; padding: 0px; width: 1024px; height: 512px; position:absolute;	top:30%;
	left:50%;
	margin-top:-100px;
	margin-left:-512px;"" >
	<!--
	<div >
		<img src="maps/11/1196/688.png" ><img src="maps/11/1197/688.png"><img src="maps/11/1198/688.png"><img src="maps/11/1199/688.png">
		</div>
		<div style=" margin: -3px auto">
		<img src="maps/11/1196/689.png"><img src="maps/11/1197/689.png"><img src="maps/11/1198/689.png"><img src="maps/11/1199/689.png">
	</div>
	
		<canvas id="map" width="1024" height="512" style="position: absolute; z-index: 0;">	</canvas>
	-->
	<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
	
 </div>

 <script>
/*
 var fonMap1=[];
for (var i=0; i<4; i++){
fonMap1[i] = new Image(); //переменна картинки

}
 
 for (var i=0; i<4; i++){
 fonMap1[i].src= "http://b.tile.openstreetmap.org/11/119"+(i+6)+"/688.png";
 }
 
var num=0;
function onload_img(){
	 if(++num == 4){
	   //alert ("щл");// загружены все фото
		draw_fon_map();
	}
}
 
 for(var i = 0; i < 4; i++) {
   fonMap1[i].onload = onload_img;
}

 
 //fonMap1[0].src= "http://b.tile.openstreetmap.org/11/1196/688.png";



 
var fon_map_cnv = document.getElementById('map'); // находим канву
var ctx = fon_map_cnv.getContext('2d'); 

function draw_fon_map(){
    // 2d контекст
	for (var i=0; i<4; i++){
		  ctx.drawImage(fonMap1[i], (256*i), 0, 256, 256); // выводим в канвас картику на координаты 0 0 размером  654, 479
		}
ctx.translate(100, 50) ;
  }
  
   // адрес картики http://b.tile.openstreetmap.org/14

  */
 </script>
 
 
</body>



</html>